<template>
  <div class="decorate-panel" v-if="isShowPanel">
    <panel-global v-if="false"></panel-global>
    <panel-slide v-if="category === categoryConstants.SLIDE"></panel-slide>
    <panel-navigation v-else-if="category === categoryConstants.NAVIGATION"></panel-navigation>
    <panel-recommend v-else-if="category === categoryConstants.RECOMMEND"></panel-recommend>
    <panel-coupon v-else-if="category === categoryConstants.COUPON"/>
    <div class="panel-desc" v-else>
      <span>点击左侧预览位置元素进行编辑</span>
    </div>
  </div>
</template>

<script>
import PanelSlide from './components/slide'
import PanelNavigation from './components/navigation'
import PanelRecommend from './components/recommend'
import PanelCoupon from './components/coupon'
import PanelGlobal from './components/global'
import { mapState } from 'vuex'
import { STORE_NAMESPACE, categoryConstants } from '../../config'
export default {
  name: 'Panel',
  components: {
    PanelSlide,
    PanelNavigation,
    PanelRecommend,
    PanelCoupon,
    PanelGlobal
  },
  data () {
    return {
      categoryConstants: { ...categoryConstants }
    }
  },
  computed: {
    ...mapState({
      current: state => state[STORE_NAMESPACE].current || {},
      layouts: state => state[STORE_NAMESPACE].layouts || []
    }),
    category () {
      return this.current.category
    },
    isShowPanel () {
      return this.layouts.length !== 0
    }
  }
}
</script>

<style lang="less" scoped>
.decorate-panel {
  min-width: 360px;
  max-width: 360px;
  background: #fff;
  position: relative;
  z-index: 90;
  box-shadow: -3px 0 4px rgba(0,0,0,.1);
  .template {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  & ::v-deep .title {
    font-weight: bold;
    padding: 10px;
    line-height: 1;
    border-bottom: 1px solid #f1f1f1;
    font-size: 15px;
    .desc {
      display: inline-block;
      color: #999;
      font-size: 12px;
      transform: scale(.9);
      transform-origin: bottom left;
      font-weight: normal;
    }
  }
  & ::v-deep .content {
    flex: 1;
    padding: 10px;
    overflow: auto;
    .block {
      padding-bottom: 20px;
      .tips {
        color: #999;
        font-size: 12px;
        em {
          color: #FF6600;
          font-style: normal;
        }
      }
      .dt{
        color: #999;
        padding-bottom: 10px;
        font-size: 14px;
      }
      .dd {
        display: flex;
        .switch-item { // 可以去掉
          display: flex;
          justify-content: center;
          align-items: center;
          .switch-item-label {
            text-align: right;
            vertical-align: middle;
            float: left;
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            padding: 0 12px 0 0;
            box-sizing: border-box;
          }
        }
        .item {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          margin-bottom: 5px;
          .item-label {
            // text-align: right;
            vertical-align: middle;
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            padding: 0 12px 0 0;
            box-sizing: border-box;
            word-break: keep-all;
          }
          .item-image {
            max-width: 100%;
            max-height: 100px;
            overflow: hidden;
            cursor: pointer;
            .empty {
              font-size: 30px;
            }
            img {
              max-width: 100%;
              max-height: 100%;
              object-fit: contain;
            }
          }
        }
        .item-column {
          flex-flow: column;
          align-items: flex-start;
          flex-wrap: wrap;
          // .item-label {
          //   text-align: left;
          // }
        }
        .item-tips {
          color: #999;
          font-size: 12px;
          line-height: 1.5;
          margin-bottom: 5px;
          em {
            color: #FF6600;
            font-style: normal;
          }
        }
      }
      .submit{
        max-width: 150px;
        padding-top: 10px;
        margin: 0 auto;
        .el-button{ width: 100%;}
      }
      .list {
        ul {
          display: flex;
          flex-wrap: wrap;
          margin: 0 5px 5px 0;
          li {
            padding: 2px;
            width: 80px;
            height: 80px;
            overflow: hidden;
            box-sizing: border-box;
          }
          .el-image {
            width: 100%;
            height: 100%;
            display: block;
            cursor: pointer;
          }
        }
      }
    }
    .image-slot {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        font-size: 25px
      }
    }
  }
  .panel-desc {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #999;
    span {
      flex: 1
    }
  }
}

</style>